<template>
  <el-card style="margin-bottom:20px;">

    <div slot="header" class="clearfix">
      <el-button type="text" @click="openAddRoleName">点击添加部门</el-button>

      <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
        <el-form label-width="80px" :model="roleData">
          <el-form-item label="部门名称">
            <el-input v-model="roleData.name" placeholder="请输入部门部门名称" ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRole2">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <el-table
      ref="singleTable"
      :data="roleList"
      highlight-current-row
      @current-change="getRoleId"
      :show-header="false"
      style="width: 100%;cursor: pointer">
      <el-table-column
        property="name"
        label="部门名称">
      </el-table-column>
    </el-table>

<!--    <ul class="infinite-ul">
      <li class="infinite-list-item" v-for="(role,index) in roleList" :key="index" @click="getRoleId(role)" :class="{active11:role.active}">
        {{role.name}}
      </li>
    </ul>-->

  </el-card>
</template>

<script>
import {addRole} from '@/api/system/index'
export default {
  name: "Role",
  props:['roleList','getAllRole','getMenuOrUserList'],
  data(){
    return{
      dialogVisible: false,
      roleData : {
        name:''
      },
      // 列表中的值
      roleListData:[]
    }
  },
  methods: {
    /**
     * 添加部门
     * @returns {boolean}
     */
    addRole2(){
      if(this.roleData.name === ''){
        this.$message({
          message: '部门名称不能为空',
          type: 'warning'
        });
        return false;
      }
      // 执行添加方法
      addRole(this.roleData.name).then(res => {
        if(res.data){
          this.dialogVisible = false
          this.getAllRole()
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        }
      }).catch(res => {
        this.$message.error(res.msg);
      })
    },

    /**
     * 打开弹窗
     */
    openAddRoleName(){
      this.roleData = {
        name:''
      }
      this.dialogVisible = true
    },

    /**
     * 给index 中的 roleId 赋值并查询对应的权限和 人员
     * @param role
     */
    getRoleId(data){
      this.roleList.forEach(function(obj){
        obj.active = false;
      });
      data.active = !data.active;
      this.getMenuOrUserList(data.id)
    },

    /**
     * 点击空白处是否管理弹窗
     * @param done
     */
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }

  }
}
</script>

<style lang="scss">
.div1{
  -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 20px;
}
.infinite-ul{
  height: 100%;
  padding: 0;
  margin: 0;
  border-radius: 20px;
  .infinite-list-item{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: #fff;
    color: #606266;
    cursor:pointer;
    border: 1px solid #DFDFDF;
  }
  .infinite-list-item:hover{
    color: #fff;
    background: #1CB394;
  }
  .active11{
    color: #fff;
    background: #1CB394;
    border-radius: 3px;
  }

}
</style>
